<template>
	<view class="template-details tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>

		<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<block v-for="(item,index) in swiperList" :key="index">
				<view class="spot" :class="cardCur==index?'active':''"></view>
			</block>
		</view>
		<view class="">
			<tn-subsection :list="list" mode="button" disabled="false" :borderRadius="50" animationType="cubic-bezier" @change="changeTop"></tn-subsection>
		</view>

		<view class="tn-margin">
			<view class="tn-flex tn-flex-row-between tn-flex-col-between tn-padding-top-xs" style="margin-top: 1%;">
				<!-- <text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
				  {{ item.desc }}
				</text> -->
				<view class="justify-content-item tn-flex tn-flex-col-center">
					<tn-avatar class="" shape="circle" :src="content.xom.avatar" size="sm">
					</tn-avatar>
					&nbsp; &nbsp; &nbsp;
					<text class="tn-color-gray">{{ content.xom.userName }}</text>
				</view>
				<!-- <view class="justify-content-item tn-flex tn-flex-col-center" @click="tn('/orderPages/me')">
					<text class="tn-color-gray">主页 ></text>
				</view> -->


			</view>
			<view class="tn-flex  tn-flex-col-between" style="margin-top: 2%;">
				<view class="justify-content-item tn-flex tn-flex-col-center">
					<text class="tn-blogger-content__count-icon tn-color-purplered"
						style="font-size: 40rpx; margin-left: 50rpx;">{{content.xom.title}}</text>
					<text class="tn-padding-right-sm tn-text-bold tn-color-purplered"
						style="font-size: 24rpx; margin-left: 20rpx;">(￥{{ content.xom.price }})</text>
						<text class="tn-padding-right-sm tn-text-bold tn-color-purplered"
							style="font-size: 24rpx; margin-left: 20rpx;">({{ content.xom.orderId }})</text>
				</view>
			</view>


			<!-- 	<view class="tn-margin">
				<view class="tn-flex tn-flex-row-between">
					<view class="justify-content-item tn-text-bold tn-text-xl">
						{{content.title}}
					</view>
				</view>
			</view> -->

			<view class="">
				<view class="tn-tag-content tn-margin tn-text-justify">
					<view class="tn-flex  tn-flex-col-between" style="margin-top: 2%;">
						<view class="justify-content-item tn-tag-content__item   tn-text-sm tn-text-bold"
							:class="[`tn-bg-${userInfo.color}--light tn-color-${userInfo.color}`]">
							<text class="tn-tag-content__item--prefix" v-if="index!=0">#工时</text> {{ content.xom.workDate }}
						</view>
						<view class="justify-content-item tn-tag-content__item   tn-text-sm tn-text-bold"
							:class="[`tn-bg-${userInfo.color}--light tn-color-${userInfo.color}`]">
							<text class="tn-tag-content__item--prefix" v-if="index!=0">#</text> {{ content.xom.role }}
						</view>
						<view class="justify-content-item tn-tag-content__item   tn-text-sm tn-text-bold"
							style="margin-left: 3%;"
							:class="[`tn-bg-${userInfo.color}--light tn-color-${userInfo.color}`]">
							<text class="tn-tag-content__item--prefix" v-if="index!=0">#</text> {{ content.xom.endTime }}
						</view>


					</view>
				</view>
			</view>
		</view>
		<!-- 边距间隔 -->
		<view class="tn-strip-bottom"></view>

		<view class="tn-margin">
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-bold tn-text-xl">
					发单人信息
				</view>
			</view>
		</view>
		<view class="content-backgroup tn-margin">
			<view class="tn-flex tn-flex-row-between tn-flex-col-between tn-padding-top-xs" style="margin-top: 1%;">
				<!-- <text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
				  {{ item.desc }}
				</text> -->
				<view class="justify-content-item tn-flex tn-flex-col-center tn-text-bold" >
					<tn-avatar class="" shape="circle" :src="content.xom.avata" size="sm">
					</tn-avatar>
					&nbsp; &nbsp; &nbsp;
					<text class="tn-color-gray">{{ content.xom.userName }}</text>
				</view>
				<view class="justify-content-item tn-flex tn-flex-col-center" @click="callPhoneNumber">
					<text class="tn-color-gray">联系对方 ></text>
				</view>
			</view>
		</view>


		<!-- 边距间隔 -->
		<view class="tn-strip-bottom"></view>


		<view class="tn-margin" v-if="topChangeNum == 0">
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-bold tn-text-xl">
					内容详情
				</view>
			</view>
		</view>

		<view class="content-backgroup tn-margin" v-if="topChangeNum == 0">
			<view class="resume2">
				<text>
					{{content.xom.content}}
				</text>
			</view>
		</view>
		
		<view class="tn-margin" v-if="topChangeNum == 1">
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-bold tn-text-xl">
					接单凭证(务必上传!)
				</view>
			</view>
		</view>
		
		<view class="content-backgroup tn-margin" v-if="topChangeNum == 1">
			<view class="resume2" v-if="imgUploadSuccess.fileList.length == 0">
				<view class="tn-margin-left tn-padding-top-xs">
					<view class="tn-margin-left tn-padding-top-xs">
						<tn-image-upload-drag ref="imageSuccessUpload" :action="imgUploadSuccess.action" 
							:header="imgUploadSuccess.formData" :formData="imgUploadSuccess.formData" :fileList="imgUploadSuccess.fileList"
							:disabled="imgUploadSuccess.disabled" :autoUpload="imgUploadSuccess.autoUpload"
							:maxCount="imgUploadSuccess.maxCount" :showUploadList="imgUploadSuccess.showUploadList"
							:showProgress="imgUploadSuccess.showProgress" :deleteable="imgUploadSuccess.deleteable"
							:customBtn="imgUploadSuccess.customBtn" @sort-list="onSortList" @on-success="successOrderImg" />
					</view>
					
					<tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="90%" shadow fontBold style="margin-top: 20rpx;"
						@click="uploadSuccessImg()">
						<text class="tn-icon-add tn-padding-right-xs tn-color-black"></text>
						<text class="tn-color-black">上传凭证</text>
					</tn-button>
					
				</view>
			</view>
			<view class="resume2">
				<showImg ref="showImg"
					:fileList="imgUploadSuccess.fileList"
					:disabled="showImg.disabled" 
					:showUploadList="showImg.showUploadList"
					:showProgress="showImg.showProgress" 
					:deleteable="showImg.deleteable"
					 />
			</view>
			
		</view>
		
		<view class="tn-margin" v-if="topChangeNum == 2">
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-bold tn-text-xl">
					完单凭证
				</view>
			</view>
		</view>
		
		<view class="content-backgroup tn-margin" v-if="topChangeNum == 2">
			<view class="resume2">
				<view class="resume2 ">
					<showImg ref="showImg"
						:fileList="showImg.successFileList"
						:disabled="showImg.disabled" 
						:showUploadList="showImg.showUploadList"
						:showProgress="showImg.showProgress" 
						:deleteable="showImg.deleteable"
						 />
				</view>
			</view>
		</view>


		<!-- 同款 -->



		<!-- 悬浮按钮-->
		<view class="tn-flex tn-flex-row-between tn-footerfixed"  v-if="content.state == 1">
			<view class="tn-flex-2 justify-content-item tn-margin-xs tn-text-center">
				<tn-button backgroundColor="red" padding="40rpx 0" width="40%" shadow fontBold
					@click="backOrder()">
					<text class="tn-icon-flag-fill tn-padding-right-xs tn-color-black"></text>
					<text class="tn-color-black">申 请 取 消</text>
				</tn-button>
				<tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="40%" shadow fontBold style="margin-left: 10upx;"
					@click="successOrder()">
					<text class="tn-icon-add tn-padding-right-xs tn-color-black"></text>
					<text class="tn-color-black">完 成 订 单</text>
				</tn-button>
			</view>
		</view>
		
		<!-- 悬浮按钮-->
		<view class="tn-flex tn-flex-row-between tn-footerfixed"  v-if="content.state == 2">
			<view class="tn-flex-2 justify-content-item tn-margin-xs tn-text-center">
				<tn-button backgroundColor="red" padding="40rpx 0" width="40%" shadow fontBold
					@click="canceBackOrder()">
					<text class="tn-icon-flag-fill tn-padding-right-xs tn-color-black"></text>
					<text class="tn-color-black">取 消 撤 销</text>
				</tn-button>
			</view>
		</view>
		
		<view class="tn-flex tn-flex-row-between tn-footerfixed"  v-if="content.state == 3">
			<view class="tn-flex-2 justify-content-item tn-margin-xs tn-text-center">
				<tn-button backgroundColor="red" padding="40rpx 0" width="40%" shadow fontBold
					@click="successBack()">
					<text class="tn-icon-flag-fill tn-padding-right-xs tn-color-black"></text>
					<text class="tn-color-black">同 意 撤 销</text>
				</tn-button>
				<tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="40%" shadow fontBold style="margin-left: 10upx;"
					@click="noBack()">
					<text class="tn-icon-add tn-padding-right-xs tn-color-black"></text>
					<text class="tn-color-black">拒 绝 撤 销</text>
				</tn-button>
			</view>
		</view>
		
		<view class="tn-flex tn-flex-row-between tn-footerfixed"  v-if="content.state == 5">
			<view class="tn-flex-2 justify-content-item tn-margin-xs tn-text-center">
				<tn-button backgroundColor="red" padding="40rpx 0" width="40%" shadow fontBold
					@click="backOrder()">
					<text class="tn-icon-flag-fill tn-padding-right-xs tn-color-black"></text>
					<text class="tn-color-black">申 请 取 消</text>
				</tn-button>
				<tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="40%" shadow fontBold style="margin-left: 10upx;"
					@click="successOrder()">
					<text class="tn-icon-add tn-padding-right-xs tn-color-black"></text>
					<text class="tn-color-black">完 成 订 单</text>
				</tn-button>
			</view>
		</view>
		
		
		<!-- 完成订单 -->
		<tn-popup v-model="popup.show" :marginTop="vuex_custom_bar_height" length="50%" :mode="popup.mode"
			:backgroundColor="popup.backgroundColor" :width="popup.width" :height="popup.height"
			:borderRadius="popup.borderRadius" :closeBtn="popup.closeBtn" :closeBtnIcon="popup.closeBtnIcon"
			:closeBtnPosition="popup.closeBtnPosition" :maskCloseable="popup.maskCloseable" @close="popup.closedPopup">
			<view class="popup-content" :class="{'popup-content--center': mode === 'center'}">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
					<view class="tn-flex justify-content-item">
						<view class="tn-bg-black tn-color-white tn-text-center"
							style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
							<text class="tn-icon-image" style="font-size: 30rpx;"></text>
						</view>
						<view class="tn-text-lg tn-padding-right-xs tn-text-bold">结单凭证(务必上传!)</view>
					</view>
					<view class="justify-content-item tn-text-df tn-color-grey" @tap="clear">
						<text class="tn-padding-xs">清空上传</text>
						<text class="tn-icon-delete"></text>
					</view>
				</view>
				<view class="tn-margin-left tn-padding-top-xs">
					<view class="tn-margin-left tn-padding-top-xs">
						<tn-image-upload-drag ref="imageUpload" :action="imgUpload.action" :width="236" :height="236"
							:header="imgUpload.formData" :formData="imgUpload.formData" :fileList="imgUpload.fileList"
							:disabled="imgUpload.disabled" :autoUpload="imgUpload.autoUpload"
							:maxCount="imgUpload.maxCount" :showUploadList="imgUpload.showUploadList"
							:showProgress="imgUpload.showProgress" :deleteable="imgUpload.deleteable"
							:customBtn="imgUpload.customBtn" @sort-list="onSortList" @on-success="success" />
					</view>
				</view>
		
				<view class="tn-flex tn-flex-row-between tn-footerfixed">
					<view class="tn-flex-2 justify-content-item tn-margin-xs tn-text-center">
						<tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="90%" shadow fontBold
							@click="upload()">
							<text class="tn-icon-add tn-padding-right-xs tn-color-black"></text>
							<text class="tn-color-black">完 成 订 单</text>
						</tn-button>
					</view>
				</view>
			</view>
		</tn-popup>

		<view class='tn-tabbar-height'></view>

	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import request from '@/common/request.js'
	import showImg from '@/orderPages/showImgUpload.vue'
	export default {
		name: 'TemplateProduct',
		mixins: [template_page_mixin],
		components:{showImg},
		data() {
			return {
				res: "",
				content: {},
				list: ['订单','接单凭证','完单凭证'],
				popup: {
					show: false,
					mode: 'bottom',
					backgroundColor: '',
					width: '',
					height: '',
					borderRadius: 0,
					closeBtn: true,
					closeBtnIcon: 'close',
					closeBtnPosition: 'top-right',
					maskCloseable: true,
				},
				imgUpload: {
					action: request.getUpload(), // action: '',
					formData: {
						apiType: 'this,ali',
						Authorization: "Bearer " + uni.getStorageSync("token"),
						image: null
					},
					fileList: [
				
					],
					showUploadList: true,
					customBtn: false,
					autoUpload: false,
					showProgress: false,
					deleteable: true,
					customStyle: false,
					maxCount: 9,
					disabled: false,
				},
				fileUrl: "",
				topChangeNum:0,
				showImg: {
					takeFileList: [],
					successFileList:[],
					showUploadList: true,
					customBtn: false,
					autoUpload: false,
					showProgress: false,
					deleteable: false,
					customStyle: false,
					disabled: false,
				},
				imgUploadSuccess: {
					action: request.getUpload(), // action: '',
					formData: {
						apiType: 'this,ali',
						Authorization: "Bearer " + uni.getStorageSync("token"),
						image: null
					},
					fileList: [
				
					],
					showUploadList: true,
					customBtn: false,
					autoUpload: false,
					showProgress: false,
					deleteable: true,
					customStyle: false,
					maxCount: 9,
					disabled: false,
				},
				fileUrl: "",
			}
		},
		onLoad: function(option) {
			this.res = option.info
		},
		mounted() {
			this.loadData();
		},
		methods: {
			loadData() {
				this.content = JSON.parse(this.res);
				console.log(this.content)
				if(this.content.xom.takeMsg != ''){
					let tempImg = this.content.xom.takeMsg.split(',');
					for (let z = 0; z < tempImg.length; z++) {
						let msgTemp = {};
						msgTemp.url = request.getBaseUrl() + tempImg[z]
						this.imgUploadSuccess.fileList.push(msgTemp) ;
					}
				}
			
				if(this.content.xom.successMsg != ''){
					let tempSuccessMsg = this.content.xom.successMsg.split(',');
					for (let z = 0; z < tempSuccessMsg.length; z++) {
						let msgTemp = {};
						msgTemp.url = request.getBaseUrl() + tempSuccessMsg[z]
						this.showImg.successFileList.push(msgTemp) ;
					}
				}
			},

			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			// tab选项卡切换
			tabChange(index) {
				this.current = index
			},
			getRandomCoolBg() {
				return this.$t.colorUtils.getRandomCoolBgClass()
			},
			successOrder() { //确认接单
				this.popup.show = true;
			},
			// 手动上传文件
			upload() {
				this.$refs.imageUpload.upload()
			},
			// 手动清空列表
			clear() {
				this.$refs.imageUpload.clear()
			},
			// 手动上传文件
			uploadSuccessImg() {
				this.$refs.imageSuccessUpload.upload()
			},

			//取消订单
			backOrder(){
				let xom = this.content.xom;
				uni.showModal({
						title: '提示：',
						content: '是否取消订单!',
						success: function(res) {
							if (res.confirm) {
								request.post("/order/closeOrder", xom).then((res) => {
									uni.navigateTo({
										url: '/orderPages/myTakeOrder',
									});
								});
							} else if (res.cancel) {
								// console.log('取消');
								//TODO
							}
						}
				});		
			},
			//完成订单
			success(data, index, array, indexNow) {
				let xom = this.content.xom;
				
				 this.fileUrl += data.fileName + ',';
				if (index + 1 == array.length) {
					xom.successMsg = this.fileUrl.substring(0, this.fileUrl.length - 1);
					request.post("/order/successOrder", xom).then((res) => {
						uni.showModal({
								title: '提示：',
								content: '提交成功！',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/orderPages/myTakeOrder',
										});
									} else if (res.cancel) {
										// console.log('取消');
										//TODO
									}
								}
						});				
					});
				} 
			},
			successOrderImg(data, index, array, indexNow){
				let xom = this.content.xom;
				
				 this.fileUrl += data.fileName + ',';
				if (index + 1 == array.length) {
					xom.takeMsg = this.fileUrl.substring(0, this.fileUrl.length - 1);
					request.post("/order/uploadTakeImg", xom).then((res) => {
						uni.showModal({
								title: '提示：',
								content: '上传完成，您可以完成订单了',
								success: function(res) {
									if (res.confirm) {
										
									} else if (res.cancel) {
										// console.log('取消');
										//TODO
									}
								}
						});				
					});
				} 
			},
			//同意撤销
			successBack(){
				let xom = this.content.xom;
				uni.showModal({
					title: '提示：',
					content: "确定同意对方撤销订单吗？",
					success: function(res) {
						if (res.confirm) {
							request.post("/order/successBack", xom).then((res) => {
								uni.reLaunch({
									url: '/orderPages/myTakeOrder'
								});
							});
				
						}
					}
				});
			},
			//拒绝撤销
			noBack(){
				let xom = this.content.xom;
				uni.showModal({
					title: '提示：',
					content: "确定拒绝对方撤销订单吗？",
					success: function(res) {
						if (res.confirm) {
							request.post("/order/noBack", xom).then((res) => {
								uni.reLaunch({
									url: '/orderPages/myTakeOrder'
								});
							});
				
						}
					}
				});
			},
			//取消撤销
			canceBackOrder(){
				let xom = this.content.xom;
				uni.showModal({
					title: '提示：',
					content: "确定取消撤销订单吗？",
					success: function(res) {
						if (res.confirm) {
							request.post("/order/canceBackOrder", xom).then((res) => {
								uni.reLaunch({
									url: '/orderPages/myTakeOrder'
								});
							});
				
						}
					}
				});
			},
			callPhoneNumber() {
				let phoneNumber = this.content.xom.contactSend;
				uni.showModal({
					title: '对方联系方式为：',
					content: phoneNumber,
					success: function(res) {
					}
				});
			},
			changeTop(data){
				this.topChangeNum = data.index;
			},

			
			
		}
	}
</script>

<style lang="scss" scoped>
	.template-product {}

	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
	}


	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/
	/* 用户头像 start */
	.logo-image {
		width: 110rpx;
		height: 110rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 10rpx;
		overflow: hidden;
		// background-color: #FFFFFF;
	}


	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/
	/* 标题 start */
	.nav_title {
		-webkit-background-clip: text;
		color: transparent;

		&--wrap {
			position: relative;
			display: flex;
			height: 120rpx;
			font-size: 46rpx;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
			background-size: cover;
		}
	}

	/* 标题 end */

	/* 底部tabbar start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/

	/* 内容图 start */
	.content-backgroup {
		z-index: -1;

		.backgroud-image {
			border-radius: 15rpx;
			width: 100%;
		}
	}

	/* 内容图 end */

	/* 商家商品 start*/
	.tn-blogger-content {
		&__wrap {
			box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
			border-radius: 20rpx;
			margin: 15rpx;
		}

		&__info {
			&__btn {
				margin-right: -12rpx;
				opacity: 0.5;
			}
		}

		&__label {
			&__item {
				line-height: 45rpx;
				padding: 0 10rpx;
				margin: 5rpx 18rpx 0 0;

				&--prefix {
					color: #E83A30;
					padding-right: 10rpx;
				}
			}

			&__desc {
				line-height: 35rpx;
			}
		}

		&__main-image {
			border-radius: 16rpx 16rpx 0 0;

			&--1 {
				max-width: 690rpx;
				min-width: 690rpx;
				max-height: 400rpx;
				min-height: 400rpx;
			}

			&--2 {
				max-width: 260rpx;
				max-height: 260rpx;
			}

			&--3 {
				height: 212rpx;
				width: 100%;
			}
		}

		&__count-icon {
			font-size: 24rpx;
			padding-right: 5rpx;
		}
	}

	.image-book {
		padding: 150rpx 0rpx;
		font-size: 16rpx;
		font-weight: 300;
		position: relative;
	}

	.image-picbook {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 15rpx 15rpx 0 0;
	}

	/* 毛玻璃*/
	.dd-glass {
		width: 100%;
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
	}
</style>